   
<script setup>
import useTodoStore from '../stores/todos'
import { onMounted } from "vue";
const todoStore = useTodoStore()

onMounted(() => {
  todoStore.getList()
})
const update = (item) => {
    item.isDone = !item.isDone
    todoStore.update(item)
}
const del = (it) => {
    todoStore.del(id)
}
  </script>
<template>
    <ul class="todo-list">
      <!-- completed: 完成的类名 -->
      <li :class="{completed: item.isDone}" v-for="item in todoStore.list" :key="item.id">
        <div class="view">
          <input v-model="item.isDone" class="toggle" type="checkbox" @click="update(item)"/>
          <label>{{item.name}}</label>
          <button @click="del(item.id)" class="destroy"></button>
        </div>
      </li>
    </ul>
    
  </template>